<template>
  <el-dialog class="d-user-detail" width="65%"
    title="用户详情"
    v-model="state.visible"
    @close="handleClose"
    destroy-on-close
    draggable>
    <el-tabs class="d-user-detail-tabs" type="border-card"
      @tab-change="tabchange">
      <el-tab-pane label="基本信息">
        <user-info :user="state.user"/>
      </el-tab-pane>
      <el-tab-pane label="我的订单">
        <user-order ref="reforder" :user="state.user"/>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</template>

<script setup>

import { reactive, ref } from "vue";
import { AdminUserInfo } from "../../api/server/user";
import UserInfo from "./basic.vue";
import UserOrder from "./order.vue";

const reforder = ref(null)
const state = reactive({
  visible: false,
  user: {}
})

const show = (id) => {
  state.id = id
  state.visible = true
  AdminUserInfo(id).then(({ code, data }) => {
    console.info(36, data)
    state.user = data
  })
}

const handleClose = () => {
}

const tabchange = (val) => {
  let tabs = new Map([
    [0, 'a'],
    [1, reforder.value.getMyOrderList()],
  ]);
  tabs.get(+val)
}

defineExpose({ show })
</script>

<style scoped>
.d-user-detail {
  width: 80%;
}

.d-user-detail .d-user-detail-tabs {
  margin-top: -25px;
}
</style>
